<template>
  <div>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="选择卡片">
        <el-input
          v-model="form.card"
          style="width: 240px"
          readonly="readonly"
        />
        <span style="color: red">该账号可用余额：{{ form.balances }}  元</span>
      </el-form-item>
      <el-form-item
        label="输入提现金额：￥"
        prop="balance"
        :rules="[
          { required: true, message: '请输入提现金额', trigger: 'blur' },
          { min: 0, message: '提现金额必须大于0￥', trigger: 'blur' },
          //输入正数或小数
          {
            pattern: /^[1-9]\d*$|^(0\.\d{1,2})|(\d{1,2}\.\d{1,2})$/,
            message: '提现金额必须为正数',
          },
          {
            max: form.balances,
            message: '提现金额必须小于可用余额',
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          v-model="form.balance"
          style="width: 240px"
          placeholder="请输入提现金额"
        />
        <span style="color: red">提现金额应大于0￥</span>
      </el-form-item>
      <el-form-item
        label="收款账号"
        prop="cid"
        :rules="[
          { required: true, message: '请选择收款账号', trigger: 'change' },
        ]"
      >
        <el-select
          v-model="form.cid"
          placeholder="输入收款账号"
          size="large"
          style="width: 240px"
          @change="findcid(form.cid)"
        >
          <el-option
            v-for="item in options"
            :key="item.cid"
            :label="item.bankCard"
            :value="item.cid"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="银行卡类型">
        <el-input
          v-model="form.tname"
          style="width: 100px"
          readonly="readonly"
        />
      </el-form-item>
      <el-divider />
      <el-form-item
        label="输入密码"
        prop="payPassword"
        :rules="[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度必须大于6位', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="form.payPassword"
          style="width: 240px"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
      <el-button type="primary" @click="tixiandao()">提现</el-button>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { GetBankList, GetByCid, GetByEid, GetQuan, PostSave } from '@/api/cash'
import { ElMessage } from 'element-plus'
const options = ref([])
const form = ref({
  eid: '',
})

function tixiandao() {
  PostSave(form.value).then(res => {
    if (res.code == 200) {
      ElMessage.success('提现成功')
      window.location.reload()
    } else {
      ElMessage.error('提现失败')
    }
  })
}

function res() {
  GetByEid().then(res => {
    // console.log(res.data)
    form.value.card = res.data.card
    form.value.balances = res.data.balance
    form.value.eid = res.data.eid
  })
}
res()

function findcid(cid) {
  GetByCid(cid).then(res => {
    form.value.tname = res.data.tname
  })
}

function optionss() {
  GetBankList().then(res => {
    if (res.code == 200) {
      console.log(res.data)
      options.value = res.data
    }
  })
}

optionss()

function quan() {
  GetQuan().then(res => {
    if (res.code == 200) {
      form.value.cid = res.data.cid
      form.value.tid = res.data.tid
    }
  })
}
quan()
</script>

<style scoped lang="scss"></style>
